<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-popover="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <div class="page-header">
            <h1 class="page-title">{{title}}</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                    <p class="z-jiao">
                        设置系统权限 </br>1.选择权限所属的模块；</br> 2.填写权限名称和权限表达式
                        <a href="javascript:;">查看更多帮助</a>
                    </p>
                </el-popover>
                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>系统</div>
        </div>
        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="权限名称" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
                        <el-select placeholder="状态" v-model="conditions.state.value" clearable class="z_select-holder">
                            <el-option
                                    v-for="state in stateList"
                                    :key="state.value"
                                    :label="state.name"
                                    :value="state.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="filter-operate">
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div class="filter-btn fr">
                    <el-button type="primary" @click="handleAdd">新增权限</el-button>
                </div>
            </div>
            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="permissionList" v-loading="loading" style="width: 100%;">
                    <el-table-column fixed label="序号" type="index"></el-table-column>
                    <el-table-column prop="name" label="名称" min-width="200"></el-table-column>
                    <el-table-column prop="express" label="表达式" min-width="200"></el-table-column>
                    <el-table-column prop="state" label="状态" :formatter="stateFormatter" min-width="200"></el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="140" class-name="table-operate-td">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <span class="fz_c optionline"> | </span>
                            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="新增权限" :visible.sync="dialogVisible">
            <el-form :model="permission" :rules="rules" ref="permission-form" label-width="80px" class="demo-ruleForm">
                <el-form-item label="所属菜单">
                    <el-select v-model="permission.menuName" ref="menu-select" placeholder="请选择权限所属菜单">
                        <el-option :value="permission.menuId" style="height: auto;padding-left: 0;padding-right: 0;">
                            <el-tree :data="menuList" ref="menu-tree" node-key="uuid" :props="defaultProps"
                                     :render-after-expand="false"
                                     @node-click="handleNodeClick"></el-tree>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="permission.name"></el-input>
                </el-form-item>
                <el-form-item label="表达式" prop="phone">
                    <el-input v-model="permission.express"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-radio-group v-model="permission.state">
                        <el-radio :label="true">启用</el-radio>
                        <el-radio :label="false">不启用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="isAdd" type="primary" @click="addPermission">确 定</el-button>
                <el-button v-if="!isAdd" type="primary" @click="updatePermission">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            title: [[${type}]] === 0 ? '平台权限' : '商户权限',
            loading: true,
            dialogVisible: false,
            stateList: [{name: '启用', value: true}, {name: '不启用', value: false}],
            menuList: [[${menuList}]],
            permissionList: [],
            type: [[${type}]],
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": ""
                },
                "menuId": {
                    "operation": "EQ",
                    "value": ""
                },
                "type": {
                    "operation": "EQ",
                    "value": [[${type}]]
                },
                "state": {
                    "operation": "EQ",
                    "value": ""
                }
            },
            permission: {
                uuid: undefined,
                menuId: undefined,
                type: [[${type}]],
                menuName: undefined,
            },
            rules: {
                menuId: [
                    {required: true, message: "请选择权限所属模块", trigger: 'blur'}
                ],
                name: [
                    {required: true, message: "请输入权限名称", trigger: 'blur'},
                    {max: 20, message: '权限名称不能超过20个字符', trigger: 'blur'}
                ],
                express: [
                    {required: true, message: "请输入权限表达式", trigger: 'blur'},
                    {max: 20, message: '权限表达式不能超过20个字符', trigger: 'blur'}
                ]
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            defaultProps: {
                id: 'uuid',
                label: 'name',
                children: 'childrens'
            },
            isAdd: true,
        },
        created: function () {
            this.quertPermission();
        },
        methods: {
            stateFormatter(row, column, cellValue, position) {
                for (let state of this.stateList) {
                    if (state.value === cellValue) {
                        return state.name;
                    }
                }
                return cellValue;
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.quertPermission();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.quertPermission();
            },
            handleQuery: function () {
                this.currentPage = 1;
                this.quertPermission();
            },
            handleClear() {
                this.conditions.name.value = undefined;
                this.conditions.state.value = undefined;
            },
            hideDialog: function () {
                this.dialogVisible = false;
            },
            handleAdd: function () {
                this.isAdd = true;
                $("#openText").html("编辑部门");
                $("#addDialog").css('display', 'block');
                $("#editDialog").css('display', 'none');
                this.permission = {
                    uuid: undefined,
                    menuId: undefined,
                    menuName: undefined,
                    type: this.type,
                    state: true
                };
                this.dialogVisible = true;
            },
            handleEdit(position, row) {
                this.isAdd = false;
                $("#openText").html("编辑部门");
                $("#addDialog").css('display', 'none');
                $("#editDialog").css('display', 'block');
                this.permission = row;
                this.dialogVisible = true;
                let node = this.$refs['menu-tree'].getNode(this.permission.menuId);
                if (node) {
                    this.handleNodeClick(node.data);
                }
            },
            handleNodeClick: function (data) {
                if (data.childrens.length === 0) {
                    this.permission.menuId = data.uuid;
                    this.permission.menuName = data.name;
                    this.$refs['menu-select'].blur();
                }
            },
            addPermission() {
                let self = this;
                self.$refs['permission-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/permission/permission/add",
                            type: "POST",
                            data: JSON.stringify(self.permission),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data) {
                                    if (data.returnCode === 1) {
                                        self.$message({
                                            message: '新增权限成功',
                                            type: 'success',
                                            customClass: 'message-center',
                                            duration: 2000,
                                            onClose: function () {
                                                self.hideDialog();
                                            }
                                        });
                                        self.handleQuery();
                                    } else {
                                        self.$message({
                                            message: data.returnNote,
                                            type: 'error',
                                            customClass: 'message-center',
                                            showClose: true,
                                            duration: 3000,
                                        });
                                    }
                                } else {
                                    self.$message({
                                        message: '新增权限失败',
                                        type: 'error',
                                        customClass: 'message-center',
                                        duration: 1500,
                                    });
                                }
                            },
                            error: function () {
                                self.loading = false;
                                self.$message({
                                    message: '出错了，请请稍后再试或联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        });
                    }
                });
            },
            updatePermission() {
                let self = this;
                self.$refs['permission-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/permission/permission/edit",
                            type: "POST",
                            data: JSON.stringify(self.permission),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data) {
                                    if (data.returnCode === 1) {
                                        self.$message({
                                            message: '修改权限成功',
                                            type: 'success',
                                            customClass: 'message-center',
                                            duration: 1500,
                                            onClose: function () {
                                                self.hideDialog();
                                            }
                                        });
                                        self.handleQuery();
                                    } else {
                                        self.$message({
                                            message: data.returnNote,
                                            type: 'error',
                                            customClass: 'message-center',
                                            showClose: true,
                                            duration: 3000,
                                        });
                                    }
                                } else {
                                    self.$message({
                                        message: '修改权限失败',
                                        type: 'error',
                                        customClass: 'message-center',
                                        duration: 1500,
                                    });
                                }
                            },
                            error: function () {
                                self.loading = false;
                                self.$message({
                                    message: '出错了，请请稍后再试或联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        });
                    }
                });
            },
            handleDelete(position, row) {
                let self = this;
                self.$confirm('确认要删除此权限信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    $.ajax({
                        url: "/backstage/permission/permission/delete",
                        type: "POST",
                        data: JSON.stringify([row.uuid]),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode === 1) {
                                self.$message({
                                    message: '删除权限成功',
                                    type: 'success',
                                    customClass: 'message-center',
                                    duration: 2000,
                                });
                                self.handleQuery();
                            } else {
                                self.$message({
                                    message: '删除权限失败',
                                    type: 'warning',
                                    customClass: 'message-center',
                                    duration: 2000,
                                });
                            }
                        },
                        error: function () {
                            self.loading = false;
                            self.$message({
                                message: '出错了，请请稍后再试或联系管理员.',
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    });
                });
            },
            quertPermission() {
                let self = this;
                self.loading = true;
                let queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "state": "desc",
                        "express": "asc",
                        "createTime": "desc"
                    }
                };
                $.ajax({
                    url: "/backstage/permission/permission/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        self.loading = false;
                        if (data && data.returnCode === 1) {
                            self.permissionList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                    }
                });
            }
        }
    });
</script>
</html>